import React from "react";
import Title from "./components/Title";
import "./index.scss";
import Image from "rc-image";
import user from "./images/user.png"
import jilu from "./images/jilu.png"
import money from "./images/money.png"
import yuqi from "./images/yuqi.png"
export default function SystemPage() {
  const affairData = [
    {
      id: 1,
      title: "待审核订单",
      data: 10,
    },
    {
      id: 2,
      title: "待放款订单",
      data: 10,
    },
    {
      id: 3,
      title: "待催收订单",
      data: 10,
    },
    {
      id: 4,
      title: "产品上线提醒",
      data: 10,
    },
    {
      id: 5,
      title: "风控规则到期提醒",
      data: 10,
    },
    {
      id: 6,
      title: "待审核订单",
      data: 10,
    },
  ];
  const loan = [
    {
      loan: "100",
      txt: "已结清",
    },
    {
      loan: "400",
      txt: "逾期中",
    },
    {
      loan: "500",
      txt: "逾期已还",
    },
  ];
  const headerData = [
    {
      id: 1,
      src: jilu,
      title: "放款数",
      data: "399",
      cont: 1999,
    },
    {
      id: 2,
      src: money,
      title: "放款金额",
      data: "399",
      cont: 1999,
    },
    {
      id: 3,
      src: yuqi,
      title: "注册已申请",
      data: "399",
      cont: 1999,
    },
    {
      id: 4,
      src: user,
      title: "注册已申请",
      data: "399",
      cont: 1999,
    },
  ];

  return (
    <div>
      <div className="list-box">
        {headerData.map((item) => (
          <div className="userList-box" key={item.id}>
            <div className="uer-titel">
              <div className="icon-img">
                <Image
                  className="icon-img"
                  src={item.src}
                  alt="用户"
                />
              </div>
              <p className="big-txt">{item.title}</p>
              <span className="small-txt">
                <p className="moth">本月/</p>
                <p className="year">今年</p>
              </span>
            </div>
            <div>
              <span className="bigtitle">{item.data}/</span>
              <span className="smalltitle">{item.cont}</span>
            </div>
            <div>
              <span className="describe">+45% 同比增长</span>
            </div>
          </div>
        ))}
      </div>
      <div>
        <Title type="待处理事务"></Title>
        <div className="affair">
          {affairData.map((item) => (
            <div className="affair-item" key={item.id}>
              <p className="p-tx">{item.title}</p>
              <p className="p-tx">({item.data})</p>
            </div>
          ))}
        </div>
        <div className="numface" style={{ marginTop: "50px" }}>
          <div className="loan">
            <Title type="贷款逾期总览"></Title>
            <div className="loan-item">
              {loan.map((item) => (
                <div key={item.txt}>
                  <div className="data-big">¥{item.loan}万</div>
                  <div className="loan-item-txt">{item.txt}</div>
                </div>
              ))}
            </div>
          </div>
          <div className="loan">
            <Title type="用户总览"></Title>
            <div className="loan-item">
              {loan.map((item) => (
                <div key={item.txt}>
                  <div className="data-big">{item.loan}</div>
                  <div className="loan-item-txt">{item.txt}</div>
                </div>
              ))}
            </div>
          </div>
        </div>
      </div>
    </div>
  );
}
